<template>
  <div class="simple-right-bottom">
    <!-- Tabs Section (Left) -->
    <div class="right-bottom__tabs">
      <SimpleTabs v-bind="tabsProps" />
    </div>
    
    <!-- Chat Mid Section (Center) -->
    <div class="right-bottom__chat">
      <SimpleChatMid v-bind="chatMidProps" />
    </div>
    
    <!-- Client Info Section (Right) -->
    <div class="right-bottom__client-info">
      <SimpleClientInfo v-bind="clientInfoProps" />
    </div>
  </div>
</template>

<script setup>
import SimpleTabs from './SimpleTabs.vue'
import SimpleChatMid from './SimpleChatMid.vue'
import SimpleClientInfo from './SimpleClientInfo.vue'

// Props
const props = defineProps({
  tabsProps: {
    type: Object,
    default: () => ({})
  },
  chatMidProps: {
    type: Object,
    default: () => ({})
  },
  clientInfoProps: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style scoped>
.simple-right-bottom {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  height: 100%;
  background-color: #f5f5f5;
  overflow: hidden;
}

/* Sections */
.right-bottom__tabs {
  grid-column: 1;
  border-right: 1px solid #e0e0e0;
  background-color: #fff;
}

.right-bottom__chat {
  grid-column: 2;
  background-color: #fff;
}

.right-bottom__client-info {
  grid-column: 3;
  border-left: 1px solid #e0e0e0;
  background-color: #fff;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .simple-right-bottom {
    grid-template-columns: 250px 1fr 280px;
  }
}

@media (max-width: 768px) {
  .simple-right-bottom {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  
  .right-bottom__tabs,
  .right-bottom__client-info {
    display: none;
  }
  
  .right-bottom__chat {
    grid-column: 1;
    grid-row: 1;
  }
}
</style>